<template>
  <div class="dingChang">
    <div class="pageHeader">
      预订
      <img src="@/static/images/arrow-left.png" alt="" @click="back">
      <a href="tel:400-0165789">
        <van-button plain type="info" class="page-right acea-row row-middle" size="small"><van-icon size="18" name="phone-o" style="margin-right:5px;" />客服</van-button>
      </a>
    </div>

    <div class="dingInfo">
      <h1>{{store.title}}</h1>
      <div class="dingTime">
        <span>开球时间</span>
        <p>{{courseDate.title}} {{courseTime.title}}</p>
      </div>
      <div class="dingName">
        <span>预约人</span>
        <p>{{userInfo.account}}</p>
      </div>

      <!-- <p class="dingNotice"><img src="@/static/images/arrow-left.png" alt="" >将为您预订。。。。。。。。。。。。。。。。。。</p> -->
    </div>

    <div class="player">
      <div class="playerName">
        <span >添加打球人</span>
        <!-- <div class="playerList">
          <p v-for="(item,index) in ballPlayer" :key="index">
            <span v-if="item.check == 1">{{ item.name }}</span>
          </p>
        </div> -->

        <a @click="$router.push(routerUrl+'/addplayer')" style="flex-wrap:nowrap" class="acea-row row-middle">
          <p>当前 {{ballPlayer.length}}人</p>
          <!-- <van-icon name="plus" color="#1989fa" size="20" /> -->
          <van-icon name="arrow" size="16" />
        </a>

        <!-- <router-link :to="{path:'/addplayer',query: {ballPlayer: JSON.stringify(this.ballPlayer)}}">
          <van-icon name="plus" color="#1989fa" size="20" />
        </router-link> -->
      </div>

      <!-- <div class="playerNumber">
        <span>人数</span>
        <p>{{ ballPlayer.length }}人</p>
      </div> -->

      <div class="playerMsg">
        <span>备注</span>
        <textarea v-model="message" name="playerMsg" id="playerMsg" placeholder="备注其他要求"></textarea>
      </div>
    </div>

    <div class="playerPrice">
      <div class="price1" v-if="userInfo.isvip==1">
        <span>会员价</span>
        <p>￥ {{yudingPrice.my_price}} x 1</p>
      </div>

      <div class="price1" v-if="userInfo.isvip==1?(ballPlayer.length-1 > 0):true">
        <span>嘉宾价</span>
        <p>￥ {{ userInfo.isvip==1?yudingPrice.guest_price:yudingPrice.my_price }} x {{userInfo.isvip==1?ballPlayer.length-1:ballPlayer.length}}</p>
      </div>

      <div class="price2">
        <span>服务费 <span>(付款成功后服务费概不退还)</span></span>
        <p>￥ {{ yudingPrice.serverOnePrice }} x {{ ballPlayer.length }}</p>
      </div>

      <div class="totalPrice">
        <span>支付总额</span>
        <p>￥ {{ sumTotalPrice() }}</p>
      </div>
    </div>

    <div class="" style="margin-top:10px">
      <van-coupon-cell
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        @click="showCoupon = true"
      />
      <!-- <span>您有可使用的现金卷</span>
      <p>{{ cashTicket.length }}</p> -->
    </div>

    <div class="payPrice">
      <!-- <span class="spanOut" @click="popShow = true">费用明细 <van-icon name="arrow-down" size="14" /></span>
      <p>￥ {{ sumTotalPrice() }}</p>
      <div class="go2buy" @click="go2buy" >
        去支付
      </div> -->
      <van-submit-bar button-color="#1989fa" :price="sumTotalPrice()*100" button-text="提交订单" @submit="go2buy">
        <span class="acea-row row-middle" @click="popShow = true">费用明细<van-icon name="arrow-down" size="14" /></span>
      </van-submit-bar>
    </div>
    <van-popup
      v-model="showCoupon"
      round
      position="bottom"
      style="height: 90%; padding-top: 4px;"
    >
      <van-coupon-list
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        :disabled-coupons="disabledCoupons"
        :show-exchange-bar="false"
        :show-close-button="true"
        @change="onChangeCoupons"
      />
      <div solt="vaild">666</div>
      <div style="display:none" class="popGoApp acea-row row-middle">
        <div class="pic"><img :src="logo" alt=""></div>
        <div class="content acea-row row-column">
          <p>小白球，让高尔夫更简单</p>
          <span>快来下载app使用红包吧</span>
        </div>
        <div class="btn">下载</div>
      </div>
    </van-popup>
    <van-popup round v-model="popShow" position="bottom">
      <h1 class="pop_title">金额优惠明细</h1>
      <h2 class="pop_title2">*实际优惠金额请以下单页为准</h2>

      <div class="price1" v-if="userInfo.isvip==1">
        <span>会员价</span>
        <p>￥ {{yudingPrice.my_price}}</p>
      </div>

      <div class="price1" v-if="userInfo.isvip==1?(ballPlayer.length-1 > 0):true">
        <span>嘉宾价</span>
        <p>￥ {{parseFloat(yudingPrice.guest_price) + parseFloat(yudingPrice.my_price)}}</p>
      </div>

      <div class="price2">
        <span>服务费</span>
        <p>￥ {{yudingPrice.server_price}}</p>
      </div>

      <div class="useTicket" v-if="usingCoupon">
        <span>优惠卷</span>
        <p>-￥ {{usingCoupon.value}}</p>
      </div>

      <div class="totalPrice">
        <span>总计</span>
        <p>￥ {{sumTotalPrice()}}</p>
      </div>

      <div class="payPrice"  style="height:50px;padding:0">
        <van-submit-bar button-color="#1989fa" :price="sumTotalPrice()*100" button-text="提交订单" @submit="go2buy">
          <span class="acea-row row-middle" @click="popShow = false">费用明细<van-icon name="arrow-up" size="14" /></span>
        </van-submit-bar>
      </div>
    </van-popup>
    
  </div>

</template>

<style scoped>
  .page-right{
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }
  .page-right >>> .van-button__text{
    display: flex;
    align-items: center;
  }
  .payPrice .van-submit-bar__bar{
    height: 60px;
  }
  .dingChang {
    position: relative;
    background: #f2f3f5;
    min-height: calc(100vh - 120px);
  }

  .dingInfo {
    position: relative;
    background: rgb(244, 248, 255);
    padding: 32px;
  }

  .dingInfo::after {
    display: none;
    position: absolute;
    top: 32px;
    right: 0;
    content: '首单返现';
    width: 120px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 20px 0 0 20px;
    color: #e93939;
    background: #fccece;
  }

  .dingInfo h1 {
    font-size: 32px;
    color: #000000;
    text-align: left;
  }

  .dingInfo div {
    display: flex;
    margin-top: 16px;
  }

  .dingInfo div p {
    margin-left: 16px;
  }

  .dingInfo .dingTime p {
    color: blue;
  }

  .dingInfo .dingName p {
    color: #000000;
  }

  .dingInfo .dingNotice {
    display: flex;
    align-items: center;
    height: 32px;
    color: #ee6617;
    margin-top: 16px;
    background: #cccccc;
  }

  .player .playerList {
    max-width: 60%;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
  }

  .dingInfo .dingNotice img {
    display: block;
    width: 32px;
    height: 32px;
  }

  .player {
    background: #ffffff;
  }

  .player div {
    position: relative;
    display: flex;
    height: 80px;
    line-height: 80px;
    padding: 0 32px;
    border-bottom: 1px solid #cccccc;
  }

  .player div:last-child {
    border: 0;
  }

  .player div span {
    display: block;
    width: 20%;
    text-align: left;
    font-size: 26px;
  }

  .player div p {
    width: 80%;
    font-size: 24px;
    height: 80px;
    line-height: 80px;
  }

  .player div p span {
    width: 100%;
    white-space: nowrap;
  }

  .player .playerName p span {
    display: block;
    position: relative;
    margin-right: 20px;
  }

  .player .playerName p span::after {
    position: absolute;
    right: 10px;
    content: ',';
    width: 10px;
    height: 10px;
  }

  .player .playerName p:last-child span::after {
    display: none;
  }

  .player .playerName a {
    position: absolute;
    top: 0;
    right: 32px;
    display: flex;
    height: 100%;
    align-items: center;
  }

  .player .playerNumber p {
    text-align: right;
  }

  .player .playerMsg {
    height: 128px;
    padding-bottom: 32px;
  }

  .player .playerMsg #playerMsg {
    border: 0;
    width: 80%;
    height: 128px;
    outline: none;
    resize: none;
    text-align: right;
  }

  .playerPrice {
    background: #ffffff;
    margin-top: 20px;
  }

  .price1 , .price2 , .useTicket , .totalPrice {
    display: flex;
    justify-content: space-between;
    height: 40px;
    line-height: 40px;
    padding: 0 32px;
    font-size: 26px;
  }

  .playerPrice .price1:first-of-type {
    padding-top: 20px;
  }

  .playerPrice .price2 {
    padding-bottom: 20px;
  }

  .playerPrice .price2 span span {
    color: #1989fa;
  }

  .playerPrice div p {
    color: #999999;
  }

  .playerPrice .totalPrice {
    display: flex;
    justify-content: space-between;
    padding: 32px;
    border-top: 1px solid #cccccc;
  }

  .playerPrice .totalPrice p {
    font-size: 30px;
    color: #000000;
  }

  .cashTicket {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    padding: 32px;
    background: #ffffff;
  }

  .payPrice {
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 80px);
    line-height: 80px;
    padding: 12px 40px;
    background: #ffffff;
    z-index: 1000;
  }

  .payPrice .spanOut {
    display: flex;
    align-items: center;
  }

  .payPrice p {
    font-size: 40px;
    color: #ee6617;
  }

  .payPrice .go2buy {
    display: block;
    width: 300px;
    height: 64px;
    line-height: 64px;
    border-radius: 32px;
    background: #1989fa;
    color: #ffffff;
    text-align: center;
  }

  .van-popup .payPrice {
    position: relative;
  }

  .pop_title {
    font-weight: 700;
    font-size: 26px;
    padding-top: 16px;
    text-align: center;
    margin-bottom: 10px;
  }

  .pop_title2 {
    font-size: 26px;
    padding-top: 6px;
    text-align: center;
    margin-bottom: 20px;
  }

  .van-popup .price1 span , .van-popup .price2 span , .van-popup .useTicket span , .van-popup .totalPrice span {
    color: #000000;
  }

  .van-popup .price1 p , .van-popup .price2 p , .van-popup .useTicket p , .van-popup .totalPrice p {
    color: #ee6617;
  }

  .van-popup .totalPrice {
    margin-top: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #cccccc;
  }

  .dingChang .popGoApp{
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: #6ecf9d;
    padding: 10px 50px 10px 20px;
    box-sizing: border-box;
    z-index: 1000;
  }
  .dingChang .popGoApp .pic{
    width: 80px;
    height: 80px;
  }
  .dingChang .popGoApp .content{
    color: #ffffff;
    margin-left: 10px;
    flex: 1;
  }
  .dingChang .popGoApp .content p{
    font-size: 24px;
  }
  .dingChang .popGoApp .content span{
    font-size: 30px;
    margin-top: 10px;
  }
  .dingChang .popGoApp .btn{
    width: 150px;
    height: 50px;
    background-color: #ffffff;
    color: #125432;
    line-height: 50px;
    text-align: center;
    border-radius: 50px;
    font-size: 26px;
  }
</style>

<script>
import logo from 'static/images/logo.png'
import Vue from 'vue';
import { Dialog, Icon, Toast } from 'vant';
import { Popup } from 'vant';
import api from 'api'
import config from 'api/config.js'

Vue.use(Icon);
Vue.use(Popup);
Vue.use(Dialog)

export default {
  data() {
    return {
      routerUrl:config.routerUrl,
      logo,
      checkCount: 0,
      price1: 690,
      price2: 20,
      showCoupon:false,
      chosenCoupon: -1,
      coupons:[],
      disabledCoupons:[], //不可用优惠券
      cashTicket: [],
      useTicket: 10,
      popShow: false,
      message:"", // 留言
      usingCoupon:null //使用中的优惠券信息
    }
  },
  activated() {
    // console.log("activated")
    this.sumPrice()
    this.usingCoupon = null
    this.onChangeCoupons(-1)
    this.getCoupon()
  },
  methods: {
    go2buy(){
      let params = {}
      let yudingPrice = JSON.parse(JSON.stringify(this.yudingPrice))
      // yudingPrice.total_price = this.sumTotalPrice()
      if(this.usingCoupon){
        yudingPrice.coupon_price = this.usingCoupon.value
        params.coupon_id = this.usingCoupon.id
      }
      params.courseid = this.$store.state.common.courseid  //球场id
      params.product_id = this.yudingList.id //订场id
      params.message = this.message //留言
      params.player = JSON.stringify(this.ballPlayer)
      params.price = JSON.stringify(yudingPrice)
      params.date = parseInt(this.courseDate.date) + parseInt(Number(this.courseTime.time)*3600)
      params.member_id = this.userInfo.id
      // params.iswap = 1
      api.post("/order/orderCourse",params).then(e=>{
          this.$router.push(this.routerUrl+"/go2buy/"+e.data.order_id)
      })
    },
    getCoupon(){
      return new Promise((resolve, reject) => {
        api.get("/order/getCoupons").then(e=>{
          let coupons = []
          let disabledCoupons = []
          for(let i of e.data){
            let o = {
              id:i.id,
              name:i.coupon_title,
              condition:Number(i.use_min_price) > 0?"满"+i.use_min_price+"可用":"无使用门栏",
              endAt:i.endAt?i.endAt:0,
              startAt:i.startAt?i.startAt:0,
              reason:this.getReason(i), //不可用原因
              valueDesc:i.coupon_price,
              value:i.coupon_price*100,
              unitDesc:"元"
            }
            if(this.checkCoupon(i)){
              coupons.push(o)
            }else{
              disabledCoupons.push(o)
            }
          }
          this.coupons = coupons
          this.disabledCoupons = disabledCoupons
        })
      });
    },
    checkCoupon(i){ //检查优惠券
      if(i.iswap == 1 && i.istimevalid == 1 && this.yudingPrice.total_price >= Number(i.use_min_price) && (i.usetype == 1 || i.usetype == 3) && (i.course_id == 0 || i.course_id == this.store.id)){
        return true
      }else{
        return false
      }
    },
    getReason(i){
      // console.log(i.course_id,this.store.id  )
      if(i.istimevalid == 0){
        return "不可用"
      }else if(i.course_id != 0 && i.course_id != this.store.id){
        return "当前球场不可用"
      }else if(i.usetype == 2 || i.usetype == 4){
        return "订场不可用"
      }else{
        return "移动端不可用"
      }
    },
    onChangeCoupons(index){
      if(index != -1){
        let couponsDetail = this.coupons[index]
        let usingCoupon = {
          id:couponsDetail.id,
          value:(couponsDetail.value/100).toFixed(2)
        }
        this.usingCoupon = usingCoupon
      }else{
        this.usingCoupon = null
      }
      this.showCoupon = false;
      this.chosenCoupon = index;
    },
    sumTotalPrice(){
      let total_price = this.yudingPrice.total_price
      if(this.usingCoupon){
        total_price = total_price - this.usingCoupon.value
      }
      return total_price;
    },
    back(){
      this.$router.go(-1);//返回上一层
    },
    sumPrice(){
      this.$store.commit("yuding/sumPrice")
    }
  },
  computed:{
    ballPlayer(){
      // console.log("ballPlayer",this.$store.state.yuding.player)
      let player = this.$store.state.yuding.player.filter(e=>e.check == 1)
      return player
    },
    courseDate(){
      return this.$store.state.yuding.courseDate
    },
    courseTime(){
      return this.$store.state.yuding.courseTime
    },
    userInfo(){
      let member = this.$store.state.user.userInfo?this.$store.state.user.userInfo.member:{}
      return member
    },
    store(){
      return this.$store.state.common.storeData
    },
    yudingList(){
      return this.$store.state.yuding.list
    },
    yudingPrice(){
      return this.$store.state.yuding.price
    },
  }
}
</script>